<template>
  <div class="staffManage-container">
    <div el-if="isShowTable" class="show-table">
      <div class="searchStaffTitle">
        <EliAutoComplete
          :item="obj"
          value-key="name"
          filterable
          clearable
          placeholder="请选择企业"
          @querySearchAsync="changeEnt"
        />
        <el-select
          v-model="entName"
          filterable
          clearable
          placeholder="请选择企业"
          @change="changeEnt"
        >
          <el-option
            v-for="lo in entNameList"
            :key="lo.k_EntId"
            :label="lo.entName"
            :value="lo.k_EntId"
          />
        </el-select>
        <el-select
          v-model="orgName"
          filterable
          clearable
          placeholder="请选择机构"
          style="width: 300px;"
          collapse-tags
          @change="changeOrg"
        >
          <el-option
            v-for="item in orgNameList"
            :key="item.orgName"
            :label="item.orgName"
            :value="item.orgName"
          />
        </el-select>
        <el-date-picker
          v-model="createDateRange"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="创建开始日期"
          end-placeholder="创建结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        <eli-input v-model="creater" placeholder="创建人" />
        <eli-input v-model="vagueName" placeholder="姓名/登录名" />
        <el-select v-model="status" clearable placeholder="状态">
          <el-option :label="'草稿'" :value="'0'" />
          <el-option :label="'在职'" :value="'1'" />
          <el-option :label="'已离职'" :value="'2'" />
        </el-select>
        <el-button type="primary" class="search-btn" @click="staffSearch">搜索</el-button>
      </div>
      <div class="line" />
      <div class="staff-form" :class="{'isMultiScreen': isMultiScreen}">
        <div class="operation">
          <el-button type="primary" class="fl" @click="addStaff">新增人员</el-button>
          <el-button type="primary" class="fl" @click="editStaff">编辑</el-button>
          <el-button type="primary" class="fl" @click="staffQuit">离职</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="staffList"
          tooltip-effect="dark"
          style="width: 100%;"
          height="calc(100vh - 420px)"
          @selection-change="selectStaffManage"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            fixed
            prop="staffName"
            label="姓名"
            width="110"
          />
          <el-table-column
            prop="status"
            label="状态"
            width="90"
            :formatter="statusType"
          />
          <el-table-column
            prop="role"
            label="角色"
            style="width: 40%"
          />
          <el-table-column
            prop="entName"
            label="企业"
            width="200"
          />
          <el-table-column
            prop="orgName"
            label="门店机构"
            width="200"
          />
          <el-table-column
            prop="lgnName"
            label="登录名"
            width="110"
          />
          <el-table-column
            prop="creater"
            label="创建人"
            width="100"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
          />
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getstaffList, getEntDoc, getOrgDoc, staffQuit } from '@/api/bill'
export default {
  data() {
    return {
      scroll: { y: 'calc(100vh - 300px)' },
      currentPage4: 1,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      obj: {},
      k_OrgId: '',
      k_EntId: '',
      entName: '',
      orgName: '',
      orgIdList: [],
      entNameList: [],
      orgNameList: [],
      createDateRange: '',
      creater: '',
      vagueName: '',
      startTime: '',
      endTime: '',
      status: '',
      loading: false,
      staffList: [],
      multipleSelection: [],
      currentPage: 1,
      total: 0,
      pageNo: 1,
      pageSize: 10
    }
  },
  computed: {
    isShowTable() {
      return this.$route.fullPath === '/dashboard'
    },
    isMultiScreen() {
      return this.$store.state.resize.multiScreen
    }
  },
  watch: {
    createDateRange(time) {
      if (time) {
        this.startTime = time[0]
        this.endTime = time[1]
      } else {
        this.startTime = ''
        this.endTime = ''
      }
    }
  },
  created() {
    this.staffSearch()
    this.getEntDoc()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.staffSearch()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.staffSearch()
    },
    getEntDoc() {
      const params = {
      }
      getEntDoc(params).then(res => {
        this.entNameList = res.data
      })
        .finally(() => {
          this.loading = false
        })
    },
    changeEnt(val) {
      this.k_OrgId = ''
      this.orgName = ''
      let obj = {}
      obj = this.entNameList.find((item) => {
        return item.k_EntId === val
      })
      if (obj != null) {
        this.entName = obj.entName
        this.k_EntId = obj.k_EntId
      } else {
        this.entName = ''
        this.k_EntId = ''
      }
      this.orgIdList = null
      this.getOrgDoc()
    },
    getOrgDoc() {
      const params = {
        requestEntId: this.k_EntId
      }
      getOrgDoc(params).then(res => {
        this.orgNameList = res.data
      })
        .finally(() => {
          this.loading = false
        })
    },
    changeOrg(val) {
      // let obj = {};
      // obj = this.orgNameList.find((item)=>{
      //     return item.k_OrgId === val;
      // });
      // if(obj != null){
      //     this.orgName = obj.orgName;
      //     this.k_OrgId = obj.k_OrgId;
      // }else{
      //     this.orgName = '';
      //     this.k_OrgId = '';
      // }
    },
    statusType(row, column) {
      if (row.status === 0) {
        return '草稿'
      } else if (row.status === 1) {
        return '在职'
      } else if (row.status === 2) {
        return '已离职'
      }
    },
    staffSearch(payload) {
      const params = {
        creater: this.creater,
        endTime: this.endTime,
        entName: this.entName,
        k_EntId: this.k_EntId,
        orgName: this.orgName,
        orgIdList: this.orgIdList,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        startTime: this.startTime,
        status: this.status,
        vagueName: this.vagueName
      }
      Object.assign(params, payload)
      getstaffList({
        ...params
      })
        .then(res => {
          const data = res.data
          this.staffList = data.results
          this.total = data.totalRecord
          console.log(this.staffList)
        })
        .finally(_ => {
          this.loading = false
        })
    },
    selectStaffManage(val) {
      this.multipleSelection = val
    },
    addStaff() {
      this.$router.push({
        name: 'staffDetail',
        params: {
          billNo: ''
        }
      })
    },
    staffQuit() {
      if (this.multipleSelection.length > 1) {
        this.$message({
          message: '一次只能编辑一条数据',
          type: 'error'
        })
      } else if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请选择你所需要编辑的数据',
          type: 'warning'
        })
      } else {
        this.$confirm('此操作将使该职员从该企业离职, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            billNo: this.multipleSelection[0].billNo
          }
          staffQuit(params).then(res => {
            if (res.code === '40001') {
              this.$message({
                type: 'success',
                message: res.message,
                showClose: true
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message,
                showClose: true
              })
            }
          })
            .finally(() => {
              this.loading = false
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消离职'
          })
        })
      }
    },
    editStaff() {
      if (this.multipleSelection.length > 1) {
        this.$message({
          message: '一次只能编辑一条数据',
          type: 'error'
        })
      } else if (this.multipleSelection.length === 0) {
        this.$message({
          message: '请选择你所需要编辑的数据',
          type: 'warning'
        })
      } else {
        this.$router.push({
          name: 'staffDetail',
          params: {
            billNo: this.multipleSelection[0].billNo
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/style/deploy/staff/staffManage.scss";
  .el-table {
    -ms-flex: none !important;
    flex: none !important;
    height: max-content;
  };
  .block{
    padding: 10px;
  }
</style>
